<template>
  <div class="section-tree">
    <el-card>
      <div slot="header" class="clearfix card-header">
        <span>{{ courseName }}</span>
        <el-button
          icon="el-icon-plus"
          style="float: right"
          @click="createSection"
          >添加章节</el-button
        >
      </div>
      <el-tree :data="sectionList" :props="defaultProps">
        <template slot-scope="{ node, data }">
          <div class="tree-btns">
            <span>{{ node.label }}</span>
            <el-row v-if="data.sectionName">
              <el-button @click.stop="updateSection(data)">编辑</el-button>
              <el-button @click.stop="createLesson(data)">添加课时</el-button>
              <el-select
                v-model="data.status"
                placeholder="请选择"
                @change="sectionChange(data)"
              >
                <el-option
                  v-for="item in statusList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-row>
            <el-row v-if="data.theme">
              <el-button @click.stop="updateLesson(data)">编辑</el-button>
              <el-button
                @click="$router.push({
                name: 'course-video',
                params: {
                  courseId,
                },
                query: {
                  lessonId: data.id,
                  sectionId: node.parent.id,
                  courseName: courseName,
                  lessonName: data.theme
                }
              })"
                >上传视频</el-button
              >
              <el-select
                v-model="data.status"
                placeholder="请选择"
                @change="lessonChange(data)"
              >
                <el-option
                  v-for="item in statusList"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                >
                </el-option>
              </el-select>
            </el-row>
          </div>
        </template>
      </el-tree>
    </el-card>
    <create-or-update-section
      v-if="sectionEditPannelVisible"
      :isEdit="isEditSection"
      :show="sectionEditPannelVisible"
      :sectionId="sectionId"
      :courseId="courseId"
      :courseName="courseName"
      @changeDialog="changeSectionDialog"
    ></create-or-update-section>
    <create-or-update-lesson
      v-if="lessonEditPannelVisible"
      :isEdit="isEditLesson"
      :show="lessonEditPannelVisible"
      :sectionId="sectionId"
      :courseId="courseId"
      :lessonId="lessonId"
      :courseName="courseName"
      :sectionName="sectionName"
      @changeDialog="changeLessonDialog"
    ></create-or-update-lesson>
  </div>
</template>
<script lang="ts">
import Vue from 'vue'
import { getSectionAndLesson, createOrUpdateSection } from '@/apis/section'
import { createOrUpdateLesson } from '@/apis/lesson'
import { getCourseById } from '@/apis/course'
import CreateOrUpdateSection from './components/create-or-update-section.vue'
import CreateOrUpdateLesson from './components/create-or-update-lesson.vue'
interface LessonType {
  id: number;
  theme: string;
  status: number;
  orderNum: number;
  parentName: string;
}
interface SectionType {
  id: number;
  courseId: number;
  sectionName: string;
  status: number;
  orderNum: number;
  lessonDTOS: LessonType[];
}
export default Vue.extend({
  name: 'course-section',
  components: {
    CreateOrUpdateSection,
    CreateOrUpdateLesson
  },
  props: {
    courseId: {
      type: [String, Number]
    }
  },
  data() {
    return {
      courseName: '',
      sectionName: '',
      sectionId: null as number | null,
      lessonId: null as number | null,
      sectionList: [] as SectionType[],
      defaultProps: {
        children: 'lessonDTOS',
        label: function(data: any) {
          return data.sectionName || data.theme
        }
      },
      statusList: [
        {
          value: 0,
          label: '隐藏'
        },
        {
          value: 1,
          label: '未发布'
        },
        {
          value: 2,
          label: '已发布'
        }
      ],
      sectionEditPannelVisible: false,
      isEditSection: false,
      lessonEditPannelVisible: false,
      isEditLesson: false
    }
  },
  created() {
    this.loadSection()
    this.loadCourse()
  },
  methods: {
    async loadCourse() {
      const { data } = await getCourseById(this.courseId)
      if (data.code === '000000') {
        this.courseName = data.data.courseName
      }
    },
    async loadSection() {
      const { data } = await getSectionAndLesson(this.courseId)
      if (data.code === '000000') {
        console.log(data)
        this.sectionList = data.data.map((section: any) => {
          return {
            id: section.id,
            courseId: section.courseId,
            sectionName: section.sectionName,
            status: section.status,
            orderNum: section.orderNum,
            lessonDTOS:
              (section.lessonDTOS &&
                section.lessonDTOS.map((lesson: any) => ({
                  id: lesson.id,
                  theme: lesson.theme,
                  status: lesson.status,
                  orderNum: lesson.orderNum,
                  parentName: section.sectionName
                }))) ||
              []
          }
        })
      }
    },
    async sectionChange(options: SectionType) {
      const { data } = await createOrUpdateSection(options)
      if (data.code === '000000') {
        this.$message.success('修改章节成功！')
      }
    },
    async lessonChange(options: any) {
      const { data } = await createOrUpdateLesson(options)
      if (data.code === '000000') {
        this.$message.success('修改课时成功！')
      }
    },
    createSection() {
      this.isEditSection = false
      this.sectionId = null
      this.changeSectionDialog(true)
    },
    updateSection(data: SectionType) {
      this.isEditSection = true
      this.sectionId = data.id
      this.changeSectionDialog(true)
    },
    changeSectionDialog(state: boolean, reload = false) {
      this.sectionEditPannelVisible = state
      if (reload) this.loadSection()
    },
    createLesson(options: LessonType) {
      this.isEditLesson = false
      this.sectionId = options.id
      this.sectionName = ''
      this.changeLessonDialog(true)
    },
    updateLesson(options: LessonType) {
      this.isEditLesson = true
      this.lessonId = options.id
      this.sectionName = options.parentName
      this.changeLessonDialog(true)
    },
    changeLessonDialog(state: boolean, reload = false) {
      this.lessonEditPannelVisible = state
      if (reload) this.loadSection()
    }
  }
})
</script>
<style lang="scss" scoped>
::v-deep .el-tree-node__content {
  height: 50px;
}
.section-tree {
  .tree-btns {
    flex: 1;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .el-select {
    width: 90px;
    margin: 0 10px;
  }
}
::v-deep .card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
</style>
